<script setup lang="ts">
// 使用 defineEmits 定义事件
const emit = defineEmits<{
  (event: 'wechatlogin', value: boolean): void
}>()

// 点击 "注册账号" 时，触发父组件事件
const backToLogin = () => {
  emit('wechatlogin', false)
}
</script>

<template>
  <a-form class="login-qrcode">
    <a-form-item class="login-qrcode-content">
      <h2>使用微信扫一扫</h2>
      <div>
        <img
          class="login-qrcode-content-image"
          src="@/assets/qrcode.png"
          alt=""
        />
      </div>
      <h4>使用微信扫一扫/更轻松</h4>
      <a-button @click="backToLogin">返回登录</a-button>
    </a-form-item>
  </a-form>
</template>

<style lang="scss" scoped>
  // 微信扫一扫样式
  .login-qrcode {
    width: 400px;
    text-align: center;

    &-content {
      display: flex;
      line-height: 50px;
      color: $educ-color-white;

      &-image {
        height: 180px;
      }
    }
  }
</style>